<template>
  <div>

    <!-- 头部 -->
    <heads></heads>
    <personal></personal>
    <!-- 头部  end-->
    <!--左侧-->
    <left-nav @personal="personal"></left-nav>
    <!--左侧 end-->
    <!--内容组件-->
    <basic-info v-if="active == 1"></basic-info>
    <security-setting v-else></security-setting>
    <!--内容组件 end-->
    <!--
    <div class="modal">
      <div class="pub-w">
        <div class="rele-titles">新增员工<span @click="AddClose">X</span></div>
        <div class="pub-list">
          <div class="pub-li">
            <div class="pub-title">姓名</div>
            <div class="pub-input"><input type="" name="" v-model="formData.account" placeholder="请输入您的姓名" style="border: 1px solid #a0a0a0"></div>
          </div>
          <div class="pub-li">
            <div class="pub-title">手机号</div>
            <div class="pub-input"><input type="" name="" v-model="formData.phone"  placeholder="请输入您的手机号码" style="border: 1px solid #a0a0a0"></div>
          </div>
          <div class="pub-li">
            <div class="pub-title">身份证</div>
            <div class="pub-input"><input type="" name="" v-model="formData.id_card" placeholder="请输入您的证件号码" style="border: 1px solid #a0a0a0;"></div>
          </div>
          <div class="pub-li">
            <div class="pub-title">区域</div>
            <div class="pub-input">
              <input type="" name="" v-model="formData.department_id">
              <select @change="getMen" v-model="formData.department_id" placeholder="请选择">
                <option
                  v-for="item in Quyu"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </option>
              </select>
            </div>
          </div>
          <div class="pub-li">
            <div class="pub-title">门店</div>
            <div class="pub-input">
              <input type="" name="" v-model="formData.store_id">
              <select @change="getGroup" v-model="formData.store_id" placeholder="请选择">
                <option
                  v-for="item in MenD"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </option>
              </select>
            </div>
          </div>
          <div class="pub-li">
            <div class="pub-title">组别</div>
            <div class="pub-input">
              <input type="" name="" v-model="formData.group_id">
              <select v-model="formData.group_id" placeholder="请选择" >
                <option
                  v-for="item in Groups"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </option>
              </select>
            </div>
          </div>
          <div class="pub-li">
            <div class="pub-title">职务</div>
            <div class="pub-input">
              <select v-model="formData.job_id" placeholder="请选择" >
                <option
                  v-for="item in jobs"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </option>
              </select>
            </div>
          </div>
          <div class="pub-li">
            <div class="pub-title">入职渠道</div>
            <div class="pub-input">
              <select v-model="formData.entry_channel_id" placeholder="请选择" >
                <option
                  v-for="item in entry_channel_ids"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </option>
              </select>
            </div>
          </div>
          <div class="pub-li">
            <div class="pub-title">登陆密码</div>
            <div class="pub-input"><input type="password" name="" v-model="formData.password" placeholder="请输入您的密码" style="border: 1px solid #a0a0a0;height: 28px;"></div>
          </div>
          <div class="pub-li">
            <div class="pub-title">确认密码</div>
            <div class="pub-input"><input type="password" name="" v-model="formData.password_confirm" placeholder="请再次确认您的密码" style="border: 1px solid #a0a0a0;height: 28px;"></div>
          </div>
          <div class="left_box">
            <el-upload
              class="avatar-uploader"
              action="http://kf.wuyoufang.cn/newapi/Upload/uploadimg"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div class="pub-li">
            <div >
              <span class="bz">备注：请到个人资料去完善资料</span>
              <button class="bz_box" @click="AddClose" >取消</button>
              <button class="bz_box" @click="staffSubmit">保存</button>
              <p class="bz_list">鼠标点击上传头像,图片只能是 JPG 格式!<br>图片大小不能超过 2MB!</p>
            </div>
          </div>
        </div>
      </div>
    </div>-->
    <!-- 尾部 -->
    <footers></footers>
    <!-- 尾部 end -->
  </div>
</template>
<script type="text/babel">
  import heads from './head';
  import footers from './footer';
  import  Personal from './individual/Personal' // 顶部面包屑导航
  import  leftNav from './individual/leftNav' // 左侧导航
  import  basicInfo from './individual/basicInfo' // 基本资料
  import  securitySetting from './individual/securitySetting' // 基本资料
  export default {
    components: {
      // BasicInfo,
      heads,
      footers,
      Personal,
      leftNav,
      basicInfo,
      securitySetting
    },
    data() {
      return {
        MenD:[],
        Groups:[],
        formData: {},
        entry_channel_ids:[{id:1,title:'人事招聘'},{id:2,title:'员工推荐'},{id:3,title:'其它'}],
        imageUrl: '',
        onSuccess:'',
        active: 1,
      }
    },
    computed: {

    },
    props: {
      getstaff:{
        type:Function
      },
      LDmodal:{
        type:Function
      },
      AddClose: {
        type: Function
      },
      jobs: {
        type: Array
      },
      Quyu: {
        type: Array
      }
    },
    methods: {
      // 接受子组件传值
      personal(e){
        this.active = e
      },

      staffSubmit() {
        let that = this;
        that.$http.post('/index/staff', that.formData).then(res => {
          console.log(res);
          if(res.data.status ===1){
            that.AddClose();
            that.getstaff();
            that.$store.state.messageString = res.data.msg;
            that.LDmodal();
          }else {
            that.$store.state.messageString = res.data.msg;
            that.LDmodal();
          }
          console.log(res.data.msg)

        }).catch(err => {
          console.log(err)
        })
      },
      // 头像上传
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      //获取门店
      getMen(){
        let that = this;
        that.$http.get('/index/department',{
          params:{
            id:that.formData.department_id
          }
        }).then(res=>{
          that.MenD = res.data
        }).catch(err=>{
          console.log(err)
        });
      },
      //获取小组
      getGroup(){
        let that = this;
        that.$http.get('/index/department',{
          params:{
            id:that.formData.store_id
          }
        }).then(res=>{
          that.Groups = res.data
        }).catch(err=>{
          console.log(err)
        })
      },
    },
  }
</script>

<style scoped>
  .bz_box{
    top: -70px;
    left: 28%;
    position: relative;
    border: none;
    width: 70px;
    height: 35px;
    border-radius: 5px;
    background-color: #1590ed;
    cursor: pointer;
  }
 .bz_list{
   top: -50px;
   left: 28%;
   position: relative;
   color: #a0a0a0;
 }
  .pub-list {
    text-align: center;
  }
  .pub-input {
    width: 65%;
    float: left;
  }
  .pub-input input {
    width: 31.5%;
    line-height: 27px;
    margin-top: 10px;
    left: 4%;
    position: relative;
    padding-left: 10px;
    /*height: 27px;*/
    /*float: left;*/
    /*box-sizing: border-box;*/
    /*border: 1px solid #d3d3d3;*/
    /*cursor: pointer;*/
  }
  .pub-li {
    /*margin-top: 10px;*/
    width: 80%;
    display: inline-block;
  }
  .pub-title {
    width: 5%;
    line-height: 40px;
    font-size: 0.8em;
    float: left;
    top: 5px;
    left: 23%;
    position: relative;
    font-weight:bold;
    text-align:left;
  }
  .pub-w {
    top: 20%;
    position: absolute;
  }

  .pub-input select{
    cursor: pointer;
    width: 33%;
    height: 30px;
    left: 4%;
    position: relative;
    margin-top: 10px;
  }
  /*头像上传*/
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;

  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .avatar-uploader{
    right: 22%;
    position: absolute;
    top: 15%;
  }
</style>
